<template>
  <view class="goods_list">
    <!-- 搜索框 -->
    <Search></Search>
    <!-- tab 栏 -->
    <view class="list">
      <view class="tab">
        <view
          :class="index === curIndex ? 'tab_title active' : 'tab_title'"
          v-for="(item, index) in ['综合', '销量', '价格']"
          :key="index"
        >
          <view @click="handlerIndex(index)">{{ item }}</view>
        </view>
      </view>
      <view class="tab_content">
        <!-- 综合时显示 -->
        <!-- lower-threshold  距底部/右边多远时（单位px），触发 scrolltolower 事件
         scrolltolower 滚动到底部/右边，会触发 scrolltolower 事件-->
        <scroll-view
          :lower-threshold="200"
          @scrolltolower="scrolltolower"
          scroll-y="true"
        >
          <view class="lists" v-if="curIndex === 0">
            <view
              @click="slipGoods(item.goods_id)"
              class="list_content"
              v-for="(item, index) in listData"
              :key="index"
            >
              <view class="left_list">
                <image
                  :src="
                    item.goods_big_logo ||
                    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606738504921&di=fb04b8a78ab67cb9c090224c0ed225ad&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201802%2F25%2F20180225140825_zLAVN.thumb.700_0.jpeg'
                  "
                ></image>
              </view>
              <view class="right_list">
                <view class="top">{{ item.goods_name }}</view>
                <view class="bottom">￥{{ item.goods_price }}</view>
              </view>
            </view>
          </view>
        </scroll-view>
        <!-- 点击销量时显示 -->
        <view v-if="curIndex === 1">销量</view>
        <!-- 点击价格时显示 -->
        <view v-if="curIndex === 2">价格</view>
      </view>
    </view>
  </view>
</template>

<script>
import Search from "@/components/Search.vue";
export default {
  components: {
    Search,
  },
  data() {
    return {
      // 切换tab 栏切换
      curIndex: 0,
      // 请求回来的数据
      listData: [],
      // 请求参数
      goodsList: {
        query: "", // 搜索关键字
        cid: "3", // 选择的id
        pagenum: 1, // 当前页码
        pagesize: 20, // 页码的条数
        inFinies: false,
      },
    };
  },
  onLoad(e) {
    // 这里是因为 根据不同的路径跳转过来 所以 需要添加一个 或运算 如果有这个值就添加 否则就给一个空字符出纳
    this.goodsList.query = e.query || "";
    this.goodsList.cid = e.cat_id || "";
    this.getgoodsList();
  },
  methods: {
    // 监听用户下拉刷新
    scrolltolower() {
      if (this.inFinies) {
        uni.showLoading({
          title: "没有数据了",
          icom: "none",
        });
        return;
      }
      // 当前页码加1
      this.pagenum++;
      // 重新加载数据 发送请求
      this.getgoodsList();
    },
    // 点击tab 栏 切换样式
    handlerIndex(index) {
      this.curIndex = index;
    },
    async getgoodsList() {
      // 提示加载中
      uni.showLoading({
        title: "数据加载中...",
      });
      const [error, res] = await uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/goods/search",
        data: this.goodsList,
      });

      // 判断是否已经是最后一页了 如果数据的长度小于20 就表示没有数据了
      if (res.data.message.goods.length < 20) {
        this.inFinies = true;
      }
      // 每次请求回来的数据只有20tiao 所以需要和请求回来的数据在次的拼接
      this.listData = this.listData.concat(res.data.message.goods);
      // 数据回来就清掉加载提示
      uni.hideLoading();
    },
    // 点击跳转到详情页 把对应的id 传过去
    slipGoods(goods_id) {
      console.log(goods_id);
      uni.navigateTo({
        url: "../goods_detail/index?goods_id=" + goods_id,
      });
    },
  },
};
</script>

<style lang="less">
.goods_list {
  .list {
    padding: 0 41rpx;
  }
  .tab {
    height: 88rpx;
    display: flex;
    .tab_title {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
    }
    .active {
      border-bottom: 3rpx solid #ea4350;
    }
  }
  .tab_content {
    margin: 10rpx 0;
    .lists {
      height: calc(100vh - 188rpx);
      .list_content {
        height: 209rpx;
        display: flex;
      }
      .left_list {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 191rpx;
        margin-right: 29rpx;
        image {
          width: 191rpx;
          height: 191rpx;
        }
      }
      .right_list {
        .top {
          margin: 26rpx 0 50rpx 0;
          font-size: 24rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .bottom {
          color: #ea4350;
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>
